<template>
    <div class="fast-appoint-wrapper" :style="{ height: height-15+'px'}">

      <top-bar :title="topTitle"></top-bar>

      <div class="other-info" style="margin-top: 20px;">
        <h4 class="title">其他信息</h4>

        <div class="vaccination-group">
          <popup-picker title="儿童姓名"
                        show-name
                        :data="childList"
                        v-model="childValue"
                        @on-change="childChange"
                        placeholder="请选择儿童">
          </popup-picker>
        </div>

        <div class="vaccination-group">
          <x-input title="性别"
                   v-model="sexValue"
                   disabled></x-input>
        </div>
        <div class="vaccination-group">
          <x-input title="出生日期"
                   v-model="birthValue"
                   disabled></x-input>
        </div>

        <div class="vaccination-group">
          <!--<popup-picker
            title="接种点选择"
            :data="pointList"
            v-model="pointValue"
            @on-change="pointChange"
            show-name
            placeholder="接种点选择"></popup-picker>-->

          <x-input title="接种点选择"
                   v-model="selectPoint.text"
                   @click.native="popupPoint=true"
                   placeholder="选择接种点"
                   :show-clear="false" disabled></x-input>

        </div>

        <div class="datetime-group">
          <popup-picker
            title="接种时间"
            :data="inoculateArrayList"
            v-model="inoculateArrayValue"
            @on-change="inoculateArrayChange"
            placeholder="请选择接种时间"></popup-picker>
          <img src="../../../static/images/login/calendar.png" class="calendar-img">
        </div>

        <div class="specific-time-group">
          <popup-picker
            title="具体时间"
            show-name
            :data="detailsArrayList"
            v-model="detailsArrayValue"
            @on-change="detailsArrayChange"
            placeholder="请选择具体时间"></popup-picker>
        </div>

      </div>

      <div class="select-vaccine-box">
        <x-switch title="选择疫苗" @on-change="vaccineChange"
                  class="select-vaccine"
                  inline-desc="打开按钮选择疫苗"
                  v-model="selectBoolean" :disabled="vaccineDisabled"></x-switch>
        <div class="vaccine-list-tab" v-if="selectBoolean==true">
          <tab
            active-color="#DA4A4A"
            bar-active-color="#DA4A4A"
            custom-bar-width="40px"
            :line-width="2">
            <tab-item v-for="(item,index) in monthList" :key="index" @on-item-click="onItemClick(item,index)">{{item}}月龄</tab-item>
          </tab>
          <div class="vaccine-list">
              <ul>
                <li v-for="(item,index) in vaccineMonthList" :key="index" >
                  <div class="top">
                    <!-- 判断是否免费 false免费true自费-->
                    <a class="tag tag-expense" v-if="item.ispay==0">自费</a>
                    <a class="tag tag-expense" style="background:#5e81f9;" v-else>免费</a>
                    <!--canselect 0必打，2替代，1自选-->
                    <a class="tag tag-replace" v-if="item.canselect==0" style="background:#ff4445;">必打</a>
                    <a class="tag tag-replace" v-else-if="item.canselect==2" style="background:#a1b7d2;">替代</a>
                    <a class="tag tag-replace" v-else-if="item.canselect==1">自选</a>

                    <a class="detail-tag" @click="vaccineDeatils(item)">详情</a>
                  </div>
                  <div class="v-center">
                    <div class="left">
                      <p class="vaccine-title">{{item.name}}</p>
                    </div>
                    <div class="right">
                      <a class="appoint-btn"   @click="appoint(item)" v-if="item.companyid==null">预约</a>
                      <a class="appoint-btn"  style="background: #8CC6E3"  @click="appointCancel(item)" v-else>取消预约</a>
                    </div>
                  </div>
                </li>
              </ul>
          </div>
        </div>
      </div>

      <div :style="selectBoolean==true?'height: 20px;':'height: 200px;'" style="background: #fff;"></div>
      <div class="fast-bottom">
        <div class="remind-text" v-if="selectBoolean==false">
          <p class="text1">快速预约，</p>
          <p class="text2">不用选择疫苗，到医院后医生帮助选择疫苗。</p>
        </div>
        <div class="fast-btn">
          <!-- :disabled="disabledConfirmeTwo"-->
          <x-button @click.native="confirmation" >确认选择</x-button>
        </div>
      </div>

      <!--选择疫苗提供商-->
      <div v-transfer-dom>
        <popup v-model="companyPopup" position="bottom" class="switch-popup company-popup">
          <div class="header">
            <h4>选择疫苗提供商</h4>
            <img src="../../../static/images/record/close.png" class="close" @click="companyPopup=false">
          </div>
          <div class="con" style="height: 400px;overflow: scroll">
            <ul>
              <li v-for="(item,index) in companyList" :key="index"
                  :class="companyIndex==index?'active':''" @click="companyClick(item,index)">
                <div><span>公司：</span>{{item.companyname}}</div>
                <div>
                  <span>计价单位：</span>{{item.unit}}
                  <span style="margin-left:10px;">价格：</span>{{item.pirce}}
                  <span style="margin-left:10px;">类型：</span>{{item.type}}
                </div>
                <img src="../../../static/images/appoint/vaccine-select.png" class="vaccine-select-img" v-if="companyIndex==index">
              </li>
            </ul>
          </div>
          <!--<div class="popup-footer">
            <x-button @click.native="determine">确定</x-button>
          </div>-->
        </popup>
      </div>


      <div v-transfer-dom>
        <popup v-model="popupPoint" position="bottom" height="80%" class="record-popup">
          <div class="select-con">
            <picker :data='provinceList' v-model='provinceValue' @on-change='provinceChange' :fixed-columns="2"></picker>
            <picker :data='cityList' v-model='cityValue' @on-change='cityChange' :fixed-columns="2"></picker>
            <picker :data='countryList' v-model='countryValue' @on-change='countryChange' :fixed-columns="2"></picker>
          </div>
          <div class="content-list">
            <ul v-if="pointArray.length>0">
              <li  v-for="(item,index) in pointArray"
                   :class="item.value==selectFirstPoint.value?'active':''"
                   :key="index" @click="pointClick(item)">{{item.text}}</li>
            </ul>
            <div class="no-data" v-else>
              暂无数据
            </div>
          </div>
          <div class="popup-btn-con">
            <x-button @click.native="popupSure" class="popup-btn">确定</x-button>
          </div>

        </popup>
      </div>
    </div>
</template>

<script>
   import { XInput,XButton,PopupPicker,Datetime ,XSwitch,Tab, TabItem,Popup,TransferDom ,Picker} from 'vux';
   import TopBar from '@/components/top';
   import {unique1} from '../../utils/common'

    export default {
        name: "fast-appoint",
        metaInfo () {
          return {
            title: '预约接种'
          }
        },
      data(){
        return {
          selectBoolean: false,
          height:document.documentElement.clientHeight,
          companyPopup:false,
          companyList:[],

          pointList:[],
          pointValue:[],
          userId:sessionStorage.getItem('userId'),
          babyId:sessionStorage.getItem('childId'),

          monthList:[],
          vaccineMonthList:[],
          companyIndex:null,
          selectCompanyone:{},
          selectCompanyTwo:{},

          childList:[],
          childValue:[],
          childId:null,
          form:{
            userid:sessionStorage.getItem('userId'),
            babyid:sessionStorage.getItem('childId'),
            inocomid:'',   // 接种单位Id
            appointinotime:'',  // 选择的具体时间段(08:00~18:00)
            appointtime:'', //选择的日期(2019-07-19)
            money:'0',
            planid:[],
            vacId:[]
          },

          vaccineMonthArray:[],

          vacArrayId:'',

          inoculateList:[],
          inoculateArrayList:[],
          inoculateArrayValue:[],

          detailsArrayList:[],
          detailsArrayValue:[],

          topTitle:'预约接种',

          pointArray:[],
          selectPoint:{
            text:''
          },
          popupPoint:false,
          selectFirstPoint:{},

          provinceList:[],
          provinceValue:['11'],

          cityList:[],
          cityValue:['98'],

          countryList:[],
          countryValue:[],

          disabledConfirme:true,

          currentProvider:null,

          selectList:[],
          selectappoint:[],
          selectArray:[],

          sexValue:'',
          birthValue:''
        }
      },
      mounted(){
         this.getData();

        this.province();
      },
      watch:{
        companyPopup(oldVal,newVal){
          if(oldVal!==newVal){
            this.companyIndex=null;
          }
        }
      },
      computed:{
        vaccineDisabled(){
          if(this.selectPoint.text!==''){
            return false;
          }
          return true;
        },
        disabledConfirmeTwo(){
          if(this.selectBoolean==false){
            if(this.selectPoint.text=='' || this.inoculateArrayValue.length==0 || this.detailsArrayValue.length==0){
              return true
            }
          }else{
            //this.form.planid==''
            if(this.selectPoint.text=='' || this.inoculateArrayValue.length==0 || this.detailsArrayValue.length==0 || this.form.vacId==''){
              return true
            }
          }

          return false
        }
      },
      methods:{
        onItemClick(item,index){
          for(let i in this.vaccineMonthArray){
            if(i==item){
              this.vaccineMonthList=this.vaccineMonthArray[i];
            }
          }
        },
        vaccineDeatils(val){
          this.$router.push({path: '/vaccinedetails',query:{vaccinecoding:val.vaccinecoding}})
        },
        confirmation(){
          let that=this;
          let formdata=Object.assign(this.form);

          if(that.selectBoolean==false){
            if(formdata.inocomid==''){
              this.$vux.toast.text('请选择接种点', 'middel')
            }else if(formdata.appointtime==''){
              this.$vux.toast.text('请选择接种时间', 'middel')
            }else if(formdata.appointinotime==''){
              this.$vux.toast.text('请选择具体时间', 'middel')
            }else{
              delete formdata.planid;
              delete formdata.vacId;
              this.$api.post('/vaccinationReservation/generateOrder',formdata).then( (res)=> {
                if(res.data.result==0){
                  that.$router.push({path: '/appointment'})
                }else{
                  this.$vux.toast.text(res.data.msg, 'middel')
                }
              })
            }
          }else{
            if(formdata.inocomid==''){
              this.$vux.toast.text('请选择接种点', 'middel')
            }else if(formdata.appointtime==''){
              this.$vux.toast.text('请选择接种时间', 'middel')
            }else if(formdata.appointinotime==''){
              this.$vux.toast.text('请选择具体时间', 'middel')
            }else if(formdata.vacId.length==0){
              this.$vux.toast.text('请选择疫苗', 'middel')
            }else if(formdata.planid.length==0){
              this.$vux.toast.text('请选择疫苗供应商', 'middel')
            }else{
              that.$router.push({path: '/confirmation'});
              sessionStorage.setItem('formdata',JSON.stringify(formdata))
              sessionStorage.setItem('selectList',JSON.stringify(this.selectList))
            }
          }

         /* let that=this;
          let formdata=Object.assign(this.form);

          if(that.selectBoolean==false){
            delete formdata.planid;
            delete formdata.vacId;
            this.$api.post('/vaccinationReservation/generateOrder',formdata).then( (res)=> {
              if(res.data.result==0){
                that.$router.push({path: '/appointment'})
              }
            })
          }else{
            that.$router.push({path: '/confirmation'});
            sessionStorage.setItem('formdata',JSON.stringify(formdata))
            sessionStorage.setItem('selectList',JSON.stringify(this.selectList))
          }*/
        },
        getData(){
          let that=this;
          let userInfo=JSON.parse(sessionStorage.getItem('userInfo'));
          this.sexValue=userInfo.sex;
          this.birthValue=userInfo.birthday;

          let children=JSON.parse(sessionStorage.getItem('children'));

          let childListArray=[];
          for(let i in children){
            childListArray.push({
              name:children[i].name,
              value:children[i].id+''
            })
          }
          this.childList=[childListArray];

          this.childId=sessionStorage.getItem('childId');
          for(let i in childListArray){
            if(childListArray[i].value==this.childId){
              this.childValue=[childListArray[i].value]
            }
          }

        /*  this.$api.get('/systemPick/queryInoculatePoints').then(function (res) {
            if(res.status==200){
              let resultData=res.data;
              let pointListArray=[];
              for(let i in resultData){
                pointListArray.push({
                  name:resultData[i].text,
                  value:resultData[i].value
                })
              }
              that.pointList=[pointListArray]
            }
          })*/

        },
        pointChange(val){
          let that=this;
          this.form.inocomid=val[0];
          let babyId=sessionStorage.getItem('childId');
          that.$api.get(`/vaccinationReservation/findImmuneSystemPlan/${val[0]}/${this.babyId}`).then(function (res) {
            if(res.data.result==0){
              for(let i in res.data.obj){
                that.monthList.push(i);
              }
              that.vaccineMonthList=res.data.obj[0];
              that.vaccineMonthArray=res.data.obj;

            }
          })

          this.$api.get(`/vaccinationReservation/findAppointmentTime/${val[0]}/${babyId}/0`).then(function (res) {
            if(res.data.result==0){
              that.inoculateList=res.data.obj;
              let array=[];
              for(let i in res.data.obj){
                array.push({
                  name:res.data.obj[i].time,
                  value:res.data.obj[i].companyId
                })
              }
              that.inoculateArrayList=[array]
            }
          })

        },
        appoint(val){
          this.selectappoint=val;
          this.vacArrayId=val.id;
          this.companyPopup=true;

          this.$api.get(`/vaccinationReservation/findSupplierByVaccine/${val.vaccinecoding}/`+this.selectPoint.value).then( (res)=> {
            if(res.data.result==0){
              this.companyList=res.data.obj;
            }
          })

        },
        companyClick(val,index){
            this.selectList.push(Object.assign(this.selectappoint,{companyId:val.id},{vprice:val.pirce}));
            this.companyPopup=false;

          for(let i in this.vaccineMonthList){
              for(let j in this.selectList){
                if(this.vaccineMonthList[i].id==this.selectList[j].id){
                  this.vaccineMonthList[i].companyid=val.id;
                  this.selectArray.push(Number(this.selectList[j].id))
                }
              }
          }
          /*this.form.planid.push(Number(val.id));
          this.form.vacId=unique1(this.selectArray);*/

          this.form.vacId.push(Number(val.id));
          this.form.planid=unique1(this.selectArray);
        },
        appointCancel(val){
          for(let i in this.vaccineMonthList){
            if(this.vaccineMonthList[i].id==val.id){
              this.vaccineMonthList[i].companyid=null;
             /* this.form.vacId.splice(this.form.vacId.indexOf(val.id),1);
              this.form.planid.splice(this.form.planid.indexOf(this.vaccineMonthList[i].companyid),1);*/
              this.selectArray.splice(this.selectArray.indexOf(val.id),1);

              this.form.planid.splice(this.form.planid.indexOf(val.id),1);
              this.form.vacId.splice(this.form.vacId.indexOf(this.vaccineMonthList[i].companyid),1);
            }
          }
          for(let i in this.selectList){
            if(this.selectList[i].id==val.id){
              this.selectList.splice(this.selectList.indexOf(val.id),1)
            }
          }
        },
        vaccineChange(val){
          if(val==false){
            // this.form.planid='';
            this.form.vacId=[];
          }
        },
        //接种时间
        inoculateArrayChange(val){
          let objectInfo={};
          this.detailsArrayList.length=0;
          this.detailsArrayValue.length=0;

          for(let i in this.inoculateList){
            if(this.inoculateList[i].time==val[0]){
              objectInfo=this.inoculateList[i];
            }
          }

          this.$api.post('/vaccinationReservation/findDateConcreteTime',{
            companyId:this.form.inocomid,
            modeTime:objectInfo.modeTime,
            time:objectInfo.time
          }).then( (res)=> {
            if(res.data.result==0){
              if(res.data.obj){
                let array=[];
                for(let i in res.data.obj){
                  array.push({
                    name:res.data.obj[i].time,
                    value:res.data.obj[i].time
                  })
                }
                if(array.length>0){
                  this.detailsArrayList=[array]
                }
              }else{
                this.$vux.toast.text('暂无具体时间', 'middle')
              }

            }
          })
          this.form.appointtime=objectInfo.time;

        },
        detailsArrayChange(val){
          this.form.appointinotime=val[0];
        },
        province(){
          this.$api.post('/systemPick/findAllCities',{
            type:'PROVINCE',
            parentId:'zh'
          }).then( (res)=> {
            let data=res.data.obj;
            let array=[{
              name:'请选择',
              value:''
            }];
            for(let i in data){
              array.push({
                name:data[i].name,
                value:data[i].id
              })
            }
            this.provinceList=[array];
          })
        },
        provinceChange(val){
          if(val[0]){
            this.$api.post('/systemPick/findAllCities',{
              type:'CITY',
              parentId:val[0]
            }).then( (res)=> {
              let data=res.data.obj;
              let array=[{
                name:'请选择',
                value:''
              }];
              for(let i in data){
                array.push({
                  name:data[i].name,
                  value:data[i].id
                })
              }
              this.cityList=[array];
            })
            this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
              if(res.data.result==0){
                this.pointArray=res.data.obj;
              }
            })
          }
        },
        cityChange(val){
          if(val[0]){
            this.$api.post('/systemPick/findAllCities',{
              type:'COUNTRY',
              parentId:val[0]
            }).then( (res)=> {
              let data=res.data.obj;
              let array=[{
                name:'请选择',
                value:''
              }];
              for(let i in data){
                array.push({
                  name:data[i].name,
                  value:data[i].id
                })
              }
              this.countryList=[array];
            })
            this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
              if(res.data.result==0){
                this.pointArray=res.data.obj;
              }
            })
          }
        },
        countryChange(val){
          if(val[0]){
            this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
              if(res.data.result==0){
                this.pointArray=res.data.obj;
              }
            })
          }
        },
        pointClick(val){
          this.selectFirstPoint=val;

         /*this.selectPoint=val;
          this.popupPoint=false;
          this.form.inocomid=val.value;
          this.detailsArrayValue.length=0;
          this.selectBoolean=false;

          let that=this;
          let babyId=sessionStorage.getItem('childId');
          that.$api.get(`/vaccinationReservation/findImmuneSystemPlan/${val.value}/${this.babyId}`).then(function (res) {
            if(res.data.result==0){
              for(let i in res.data.obj){
                that.monthList.push(i);
              }
              that.vaccineMonthList=res.data.obj[0];
              that.vaccineMonthArray=res.data.obj;
            }
          })

          this.$api.get(`/vaccinationReservation/findAppointmentTime/${val.value}`).then(function (res) {
            if(res.data.result==0){
              that.inoculateList=res.data.obj;
              let array=[];
              for(let i in res.data.obj){
                array.push({
                  name:res.data.obj[i].time,
                  value:res.data.obj[i].companyId
                })
              }
              that.inoculateArrayList=[array]
            }
          })*/
        },
        childChange(val){
          this.$api.post('/userHandle/changeBaby',{
            id:this.userId,
            selectBaby:val[0]
          }).then( (res)=> {
            sessionStorage.setItem('childId',val[0]);
            this.form.babyid=val[0];
            let userList=JSON.parse(sessionStorage.getItem('children'));
            for(let i in userList){
              if(userList[i].id==val[0]){
                sessionStorage.setItem('userInfo',JSON.stringify(userList[i]));

                this.sexValue=userList[i].sex;
                this.birthValue=userList[i].birthday;
              }
            }
          })
        },
        popupSure(){
          this.selectPoint=this.selectFirstPoint;
          this.popupPoint=false;
          this.form.inocomid=this.selectFirstPoint.value;
          this.detailsArrayValue.length=0;
          this.selectBoolean=false;
          this.selectArray=[];
          this.form.vacId=[];
          this.form.planid=[];

          let that=this;
          let babyId=sessionStorage.getItem('childId');
          that.$api.get(`/vaccinationReservation/findImmuneSystemPlan/${this.selectFirstPoint.value}/${this.babyId}`).then(function (res) {
            if(res.data.result==0){
              for(let i in res.data.obj){
                that.monthList.push(i);
              }
              that.vaccineMonthList=res.data.obj[0];
              that.vaccineMonthArray=res.data.obj;
            }
          })

          this.$api.get(`/vaccinationReservation/findAppointmentTime/${this.selectFirstPoint.value}/${babyId}/0`).then(function (res) {
            if(res.data.result==0){
              that.inoculateList=res.data.obj;
              let array=[];
              for(let i in res.data.obj){
                /*array.push({
                  name:res.data.obj[i].time,
                  value:res.data.obj[i].companyId
                })*/
                array.push(res.data.obj[i].time)
              }
              that.inoculateArrayList=[array]
            }
          })
        }
      },
        components: {
          XInput,
          XButton,
          PopupPicker,
          Datetime,
          XSwitch,
          Tab,
          TabItem,
          Popup,
          TopBar,
          Picker
        },
        directives: {
          TransferDom
        }
    }
</script>

<style lang="scss">
  .fast-appoint-wrapper{
    position: relative;
    height: 100%;
    background: #fff;
   .weui-btn_disabled.weui-btn_default{
      opacity: 0.8;
    }
    .vux-x-input.disabled .weui-input{
      color:#333;
      -webkit-text-fill-color:#333;
      &::-webkit-input-placeholder {
        color:rgba(173,173,173,1);
        font-size: 14px;
        -webkit-text-fill-color:rgba(173,173,173,1);
      }
    }
      .other-info{
        background:rgba(255,255,255,1);
        box-shadow:-1px 0px 19px 2px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:15px;
        margin:0 15px;
        .title{
          font-size:15px;
          color:rgba(38,38,38,1);
          font-weight: normal;
          border-left:2px solid  #F56363;
          padding-left:4px;
          margin-bottom: 20px;
        }
        .weui-label{
          color:rgba(38,38,38,1);
          font-size:14px;
          width:85px!important;
        }
        .weui-input{
          color:rgba(38,38,38,1);
          font-size: 14px;
          text-align: right;
          height: 30px;
          line-height: 30px;
          &::-webkit-input-placeholder {
            color:rgba(173,173,173,1);
            font-size: 14px;
          }
        }
        .vux-datetime{
          p{
            color:rgba(38,38,38,1);
            font-size:14px;
          }
        }
        .vux-cell-placeholder{
          color:rgba(173,173,173,1);
          font-size: 14px;
        }
        .vux-cell-value{
          color:rgba(38,38,38,1);
          font-size: 14px;
        }
        .weui-cell_access .weui-cell__ft:after{
          border-color:#C7C7C7;
          border-width: 1px 1px 0 0;
        }
        .datetime-group{
          position: relative;
          border-bottom: 1px solid #EEEEEE;
          .weui-cell_access .weui-cell__ft:after{
            border-width:0;
          }
          .weui-cell_access .weui-cell__ft{
            padding-right: 24px;
            height: 30px;
            line-height: 30px;
          }
          .calendar-img{
            width:18px;
            height:22px;
            position: absolute;
            top:15px;
            right:12px;
          }
        }
        .name-group{
          border-bottom: 1px solid #EEEEEE;
        }
        .vaccination-group{
          border-bottom: 1px solid #EEEEEE;
        }
        .specific-time-group{
          .weui-cell_access .weui-cell__ft{
            padding-right: 22px;
            height: 30px;
            line-height: 30px;
          }
        }
      }
      .select-vaccine-box{
        margin-top:10px;
        .weui-label{
          color:rgba(38,38,38,1);
          font-size:14px;
        }
        .vaccine-list-tab{
          .vux-tab .vux-tab-item{
            background-size: 100% 0px;
            background:#fff;
          }
        }
        .vaccine-list{
          padding:20px 0 80px;
          background: #fff;
          ul{
            margin:0 15px;
            li{
              background:rgba(255,255,255,1);
              box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
              border-radius:10px;
              margin-bottom: 10px;
              padding:10px 15px 20px;
              .top{
                border-bottom: 1px solid #EEEEEE;
                padding-bottom: 10px;
                .tag{
                  width:39px;
                  height:24px;
                  line-height: 24px;
                  text-align: center;
                  display: inline-block;
                  background:rgba(245,180,110,1);
                  font-size:12px;
                  font-family:PingFang-SC-Regular;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                  &-replace{
                    background:#7BCB54;
                  }
                }
                .detail-tag{
                  float: right;
                  font-size:14px;
                  font-family:PingFang-SC-Regular;
                  color:rgba(218,74,74,1);
                }
              }
              .v-center{
                display: flex;
                margin-top: 15px;
                .left{
                  flex: 1;
                  margin-right: 5px;
                  .vaccine-title{
                    font-size:15px;
                    font-family:PingFang-SC-Regular;
                    color:rgba(38,38,38,1);
                    line-height: 20px;
                  }
                  .dose{
                    font-size:12px;
                    font-family:PingFang-SC-Regular;
                    color:rgba(122,122,122,1);
                    margin-top: 6px;
                  }
                }
                .right{
                  flex: 0 0 74px;
                  .appoint-btn{
                    display: inline-block;
                    width:74px;
                    height:30px;
                    line-height: 30px;
                    text-align: center;
                    background:rgba(245,99,99,1);
                    border-radius:10px;
                    font-size:14px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    &-cancel{
                      background:#8CC6E3;
                      margin-top: 10px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .fast-bottom{
        position: fixed;
        background: #fff;
        bottom: 0;
        width:100%;
        .remind-text{
          margin-bottom: 20px;
          p{
            font-size:14px;
            color:rgba(122,122,122,1);
            text-align: center;
          }
          .text1{
            margin-bottom: 5px;
          }
        }
        .fast-btn{
          .weui-btn_default{
            background:#F56363;
            color:rgba(255,255,255,1);
            font-size:14px;
            height: 54px;
            line-height: 54px;
            border-radius: 0;
          }
        }
      }
  }
  .company-popup{
    .con{
      padding: 30px 15px 0;
      .vaccine-name{
        font-size:15px;
        font-family:PingFang-SC-Bold;
        font-weight:600;
        color:rgba(245,99,99,1);
        margin:20px 0 15px;
      }
      ul{
        li{
          background:rgba(247,247,247,1);
          border-radius:10px;
          padding:15px;
          margin-bottom: 15px;
          position: relative;
          div{
            font-size:14px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:#262626;
            margin-bottom: 15px;
            &:last-child{
              margin-bottom: 0;
            }
            span{
              color:#7A7A7A;
            }
            .dose-v{
              margin-left: 70px;
            }
          }
          &.active{
            background: #fff;
            border: 1px solid #F56363;
            .vaccine-select-img{
              position: absolute;
              right:0;
              top:0;
              width: 35px;
              height: 35px;
            }
          }
        }
      }
    }
    .popup-footer{
      .weui-btn{
        height:50px;
        line-height: 50px;
        background:rgba(245,99,99,1);
        font-size:15px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
      .weui-btn_default:not(.weui-btn_disabled):active{
        background:rgba(245,99,99,1);
        color:rgba(255,255,255,1);
      }
    }
  }
  .vaccination-group{
    .vux-popup-picker-select{
      height: 30px;
      line-height: 30px;
      .vux-popup-picker-placeholder{
        color:rgba(173,173,173,1);
        font-size: 14px;
      }
      .vux-popup-picker-value{
        color:rgba(38,38,38,1);
        font-size: 14px;
        text-align: right;
        height: 30px;
      }
    }
  }
  .datetime-group{
    .vux-datetime{
      p{
        font-size:14px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(38,38,38,1);
      }
      .vux-cell-placeholder{
        color:rgba(173,173,173,1);
        font-size: 14px;
      }
      .vux-cell-primary{
        padding-right: 26px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .record-popup{
    z-index:999!important;
    background:#fff!important;
    .select-con{
      display: flex;
      .vux-picker{
        flex: 1;
      }
    }
    .content-list{
      margin-bottom: 30px;
      max-height: 200px;
      overflow: scroll;
      ul{
        padding:30px 20px;
        max-height:140px ;
        overflow-y: scroll;
        li{
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          color: #262626;
          padding: 5px;
          &.active{
            background: #d6d4d4;
            color: #fff;
            border-radius: 2px;
          }
        }
      }
      .no-data{
        text-align: center;
        color: #333;
        padding-top:80px;
      }
    }
    .popup-btn-con{
      position: absolute;
      bottom: 30px;
      width:100%;
      .popup-btn{
        width:80%;
        margin:0 auto;
        background: #F56363;
        color: white;
        font-size: 15px;
        height: 46px;
        line-height: 46px;
        border-radius: 20px;
      }
      .weui-btn_default:not(.weui-btn_disabled):active{
        background: #F56363;
        color: white;
      }
    }
  }
  .select-vaccine{
    .vux-label-desc{
      font-size: 10px;
      color: #F56363;
    }
  }
</style>
